<template>
  <div class="home" style="height: 100%;">
    <!--音乐播放器-->
    <MP3></MP3>
    <!--导航栏-->
    <Nav></Nav>
    <!--中间内容部分-->
    <div style="min-height: 750px;display: flex;justify-content: space-around;padding-top: 50px" class="content">
      <!--左侧管理员信息-->
      <AdminInfo/>
      <!--淡出淡出，避免路由切换时页面闪烁-->
      <transition name="fade" mode="in-out">
        <!--内容主体（博客、博客详情等）-->
        <router-view></router-view>
      </transition>
      <div>
        <!--右侧标签云-->
        <HotBlog/>
        <!--右侧标签云-->
        <TagCloud/>
      </div>
    </div>
  <!--底部-->
  <Footer></Footer>
  <!--左侧-->
  </div>
</template>

<style lang="less" scoped>

.content {
  background-image: url("../assets/img/002.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

.showImage{
  height: 400px;
  background-image: url("../assets/img/4.jpg");
}

</style>

<script>

import Nav from '@/components/home/Nav'
import MP3 from "@/components/other/MP3";
import Footer from "@/components/home/Footer";
import AdminInfo from "@/components/user/AdminInfo";
import TagCloud from "@/components/tag/TagCloud";
import HotBlog from "@/components/blog/HotBlog";


export default {
  name: 'Home',
  data() {
    return {}
  },
  components: {Nav, MP3, Footer, AdminInfo, TagCloud, HotBlog},
  methods: {},

}
</script>
